<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>发放药品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <style>
        .form{
            margin-left: 35%;
            margin-top: 15px;
        }
        .div{
            margin-left: 20%;
            margin-top: 10px;
        }
        .div1{
            margin-left: 120px;
        }
    </style>
</head>
<body>
<form class="layui-form form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号：</label>
        <div class="layui-input-inline">
            <input type="text" name="idNumber" id="patientIdNumber" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="patientName" lay-verify="name" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="hidden" name="drugId" id="drugId">
    <div class="layui-form-item">
        <label class="layui-form-label">药品名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="drugName" id="drugName" lay-reqtext="药品名称不能为空" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">药品单价：</label>
        <div class="layui-input-inline">
            <input type="text" name="price" id="price"  lay-reqtext="药品单价不能为空"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">药品数量：</label>
        <div class="layui-input-inline">
            <input type="text" name="changeNumber" id="changeNumber" placeholder="请输入药品数量" autocomplete="on" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">总价：</label>
        <div class="layui-input-inline">
            <input type="text" name="totalPrice" id="totalPrice"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--这里是弹出层的表单信息-->
<!--表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
<div class="layui-row" id="selectInputPatient" style="display:none;">
    <div class="layui-form demoTable div">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">住&nbsp;&nbsp;院&nbsp;&nbsp;号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室：</label>
                <div class="layui-input-inline">
                    <select name="departId" id="departId"></select>
                    <input type="hidden" id="selectId" value="${a.a_type}">
                </div>
            </div><br><br>
            <div class="layui-inline">
                <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name1" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份证号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="idNumber" id="idNumber1" autocomplete="off" class="layui-input">
                </div>
            </div><br>
        </div>
        <div class="layui-form-item div1">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="reset" class="layui-btn layui-btn-primary">清空条件</button>
            </div>
        </div>

    </div>
    <!--</form>-->

    <table class="layui-hide" id="doctor" lay-filter="user"></table>
</div>

<!--这里是弹出层的表单信息-->
<!--表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
<div class="layui-row" id="selectDrug" style="display:none;">
    <div class="layui-form demoTable form">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id1" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">药&nbsp;品&nbsp;名&nbsp;称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                </div>
            </div><br>
        </div>
        <div class="layui-form-item left">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="reset" class="layui-btn layui-btn-primary">清空条件</button>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="drug" lay-filter="drug"></table>
</div>

<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery-1.12.2.min.js"></script>

<script>
    $(function () {
        $.ajax({
            type:"get",
            url:"/hospital/doctor/selectAll.do",
            dataType:"json",
            success:function (data) {
                var optionString = "";
                var infos = data.info;
                for (var i = 0; i < infos.length; i++) {
                    optionString += "<option value=\"" + infos[i].id + "\" >" + infos[i].departName + "</option>";
                }
                $("#departId").html("<option value='请选择'>请选择...</option> "+optionString);
            },
            error: function (data) {
                alert("下拉框加载出错了！");
            }
        })
    })

    layui.use(["form", "layedit", "laydate","table","layer","jquery"], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table = layui.table
            ,$ = layui.jquery;

        //日期
        laydate.render({
            elem: '#date'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        $("#patientIdNumber").click(function () {
            var openPatient = layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "查找病人信息",
                area: ['1020px', '480px'],
                content: $("#selectInputPatient")//引用的弹出层的页面层的方式加载修改界面表单
            });
            //监听行单击事件（双击事件为：rowDouble）
            table.on('row(user)', function(obj){
                var data = obj.data;
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                setFormValue(obj,data);
                layer.close(openPatient);
            });

        })

        $("#departId").val($('#selectId').val());
        form.render('select');

        //方法级渲染
        table.render({
            elem: "#doctor"
            ,url: "/hospital/doctor/selectInHospital.do"
            ,method:"post"
            ,cols: [[
                {field:'id', title: '住院号', width:90}
                ,{field:'name', title: '姓名', width:90}
                ,{field:'idNumber',title:'身份证号',width:200}
                ,{field:'doctorName',title:'医生姓名',width:90}
                ,{field:'departName', title: '科室', width:100}
                ,{field:'typeName', title: '病房类型', width:100}
                ,{field:'bedId', title: '床位号',width:90}
                ,{field:'statusName', title: '入院情况', width:100}
                ,{field:'enterTime', title: '入院时间', width:200}
            ]]
            ,id: 'testReload'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        id:$("#id").val(),
                        departId: $("#departId").val(),
                        name:$("#name1").val(),
                        idNumber:$("#idNumber1").val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj,data){
            var name = data.name;
            var idNumber = data.idNumber;
            var doctorName = data.doctorName;
            var doctorId = data.doctorId;
            $("#patientIdNumber").val(idNumber);
            $("#patientName").val(name);
            $("#doctorName").val(doctorName);
            $("#doctorId").val(doctorId);
        }


        $("#drugName").click(function () {
            var openDrug = layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "选择药品",
                area: ['1020px', '480px'],
                content: $("#selectDrug")//引用的弹出层的页面层的方式加载修改界面表单
            });
            //监听行单击事件（双击事件为：rowDouble）
            table.on('row(drug)', function(obj){
                var data = obj.data;
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                setDrugFormValue(obj,data);
                layer.close(openDrug);
            });

        })

        //方法级渲染
        table.render({
            elem: "#drug"
            ,url: "/hospital/doctor/selectDrug.do"
            ,method:"post"
            ,cols: [[
                {field:'id', title: '编号', width:100}
                ,{field:'name', title: '药品名称', width:450}
                ,{field:'price', title: '价格', width:200}
                ,{field:'number', title: '库存量', width:200}

            ]]
            ,id: 'testDrug'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('testDrug', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        id:$("#id1").val(),
                        name: $("#name").val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setDrugFormValue(obj,data){
            var id = data.id;
            var name = data.name;
            var price = data.price;

            $("#drugId").val(id);
            $("#drugName").val(name);
            $("#price").val(price);

        }

        $("#totalPrice").click(function (data) {
            var price1 = $("#price").val();
            var changeNumber = $("#changeNumber").val();
            var totalPrice = changeNumber * price1;
            $("#totalPrice").val(totalPrice);
        })



        //监听提交
        form.on('submit(demo1)', function(data){
            $.ajax({
                type:"post",
                url:"/hospital/nurse/grantDrug.do",
                data:$("form").serialize(),
                dataType: "json",
                success:function (date) {
                    if (date.code === 1){
                        alert(date.info);
                    }else {
                        alert(date.info);
                    }
                }
            })
        });


    });

</script>

</body>
</html>